<template>
  <div class="multiple-micro">
    <div
      ref="containerReference"
      v-loading="loading"
      class="multiple-micro__item"
    >
      <micro-app-container
        name="sub-app"
        url="http://localhost:8081/fun/fun1"
        @mounted="() => (loading = false)"
        @aftershow="() => (loading = false)"
      />
    </div>

    <div
      v-loading="loading1"
      class="multiple-micro__item"
    >
      <micro-app-container
        name="sub-app1"
        url="http://localhost:8081/fun/fun2"
        @mounted="() => (loading1 = false)"
        @aftershow="() => (loading1 = false)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watchEffect } from 'vue'
  import _microApp from '@micro-zoe/micro-app'
  import { MicroAppContainer } from '@csui/micro-app'

  defineOptions({ name: 'MultipleMicro' })
  const loading = ref(true)
  const loading1 = ref(true)

  const containerReference = ref<HTMLDivElement>()

  watchEffect(() => {
    if (containerReference.value) {
      _microApp.setData('sub-app', {
        viewHeight: `${containerReference.value.offsetHeight}px`
      })
      _microApp.setData('sub-app1', {
        viewHeight: `${containerReference.value.offsetHeight}px`
      })
    }
  })
</script>

<style lang="scss">
  .multiple-micro {
    display: flex;
    gap: 20px;
    height: 705px;

    .multiple-micro__item {
      flex: auto;
      width: 0;
      height: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
      border-radius: 8px;
      overflow: hidden;
    }
  }
</style>
